<template>
  <el-dialog width="50%" title="配置规则" :visible="visible" :close-on-click-modal="false" :close-on-press-escape="false"
    @close="optionsCancel">
    <el-form ref="chooseCustomer" :model="chooseCustomer" :rules="rules" label-width="120px" label-position="right"
      style="position: relative">
      <el-form-item label="筛选类型" prop="flag">
        <el-radio-group v-model="chooseCustomer.flag" @input="handelRadio">
          <el-radio label="2">跟进状态</el-radio>
          <el-radio label="4">客户分群</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="chooseCustomer.flag === '2'" :label="screenString" prop="value">
        <el-select v-model="chooseCustomer.value" clearable multiple :placeholder="'请选择' + screenString"
          class="header-search-select">
          <el-option v-for="item in list" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="chooseCustomer.flag === '4'" label="客户分群" prop="value">
        <el-select v-model="chooseCustomer.value" clearable multiple placeholder="请选择客户分群" class="header-search-select">
          <el-option v-for="item in tagGroupArr" :key="item.groupName" :label="item.groupName" :value="item.groupName">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="footer-btn">
      <el-button type="info" plain class="dialog-btn2" @click="optionsCancel">取消</el-button>
      <el-button type="primary" @click="optionsConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "ScreenType",
  props: {
    chooseCustomer: {
      type: Object,
      default: () => {
        return {};
      },
    },
    followStatusList: {
      type: Array,
      default: []
    },
    tagGroupArr: {
      type: Array,
      default: []
    },
    visible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      list: [],
      rules: {
        flag: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        value: [
          { required: true, message: "请选择", trigger: "change" },
          { type: 'array', message: "请选择", trigger: "change" },
        ],
      }
    }
  },
  computed: {
    // 筛选类型
    screenString() {
      let screenString = ""
      if (this.chooseCustomer.flag === '2') {
        screenString = "客户状态";
        this.list = this.followStatusList
      } else if (this.chooseCustomer.flag === '3') {
        screenString = "客户分群";
        this.list = []
      } else {
        screenString = "";
        this.list = []
      }
      return screenString;
    },
  },
  watch: {
    // flag(val) {
    //   if (val) {
    //     this.chooseCustomer.value = []
    //     this.list = []
    //     this.$emit("update:chooseCustomer")
    //   }
    // }
  },
  methods: {
    handelRadio(val) {
      if (val === '2') {
        this.list = this.followStatusList
        this.chooseCustomer.value = []
      } else if (val === '3') {
        this.list = []
        this.chooseCustomer.value = []
      }
    },
    // 配置规则-确认
    optionsConfirm() {
      console.log("配置规则-确认", this.chooseCustomer);
      this.$refs["chooseCustomer"].validate(valid => {
        if (valid) {
          this.$emit("update:chooseCustomer");
          this.optionsCancel();
        } else {
          this.$message.error("你还未录入完成，请核对后提交！");
        }
      })
    },
    // 配置规则-取消
    optionsCancel() {
      // this.chooseCustomer.flag = ""
      // this.chooseCustomer.value = []
      this.$emit('close', false, this.chooseCustomer)
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";
</style>